---
title: Renderer 渲染器
icon: Monitor
relatedFile: app/src/core/render/canvas2d/renderer.tsx
---

该服务负责将项目中的各种图形元素（如节点、边、背景、交互指示等）渲染到画布上，并管理渲染过程中的性能指标和坐标转换。它是整个图形界面显示的核心组件。

## 核心渲染流程

### `tick()`

这是渲染的总入口，在每一帧被调用，协调所有渲染任务的执行，包括背景、主场景元素和视图辅助元素的渲染。

### `resizeWindow(newW: number, newH: number)`

根据新的窗口宽度和高度调整画布的尺寸，并处理设备像素比，以确保在高DPI屏幕上图像清晰。

### `updateFPS()`

在每一帧开始时更新帧率（FPS）和帧间隔时间（deltaTime）的计算，用于性能监控。

## 场景元素渲染

### `renderBackground()`

渲染画布背景，包括纯色背景、点状背景、水平线、垂直线或笛卡尔坐标系背景，可根据设置选择性渲染。

### `renderEntities(viewRectangle: Rectangle)`

渲染所有项目中的实体（如节点），确保它们在当前摄像机视野内可见。

### `renderEdges(viewRectangle: Rectangle)`

渲染所有项目中的边（如直线边、多目标无向边、Catmull-Rom样条边），确保它们在当前摄像机视野内可见。

### `renderTags()`

（待实现）用于渲染被标记的节点及其特殊装饰物。

## 交互与辅助元素渲染

### `renderViewElements(viewRectangle: Rectangle)`

渲染与视图相关的辅助元素，包括拖拽文件提示、特殊按键提示、中心准星、隐私保护板和调试信息。

### `renderMainStageElements(viewRectangle: Rectangle)`

渲染主舞台上的交互相关元素，如临时绘制、警告对象、悬停碰撞框、框选矩形、切割线、连接线、纯键盘操作提示、层级移动线和剪贴板内容。

### `renderCenterPointer()`

在画布中心渲染一个准星，用于指示视图中心。

### `renderPrivacyBoard(viewRectangle: Rectangle)`

当隐私保护模式开启时，在画布上渲染一个半透明的隐私保护层。

### `renderHoverCollisionBox()`

渲染鼠标当前悬停的节点、边或区域的碰撞框，以提供视觉反馈。

### `renderSelectingRectangle()`

渲染用户进行框选操作时显示的矩形，根据选择模式（相交或包含）显示不同的样式。

### `renderCuttingLine()`

渲染用户进行切割操作时显示的切割线。

### `renderConnectingLine()`

渲染用户手动连接节点时显示的连接线，包括虚拟连接线和已确认的连接线。

### `renderKeyboardOnly()`

渲染与纯键盘操作相关的功能提示和视觉效果，例如通过键盘创建新节点时的生长动画和提示文本。

### `rendererLayerMovingLine()`

当用户进行层级移动操作时，渲染指示移动方向和目标的线条和箭头。

### `renderDraggingFileTips()`

当有文件被拖拽到窗口中时，渲染视觉提示效果。

### `renderWarningStageObjects()`

渲染被标记为待删除的节点、边或区域的警告碰撞框。

### `renderClipboard()`

渲染剪贴板中的内容，包括原始位置的矩形、鼠标位置的预览矩形以及相关的操作提示文本。

## 调试与信息显示

### `renderDebugDetails()`

当调试模式开启时，在画布上显示详细的调试信息，如摄像机状态、渲染计数、按键状态、剪贴板内容和FPS等。

### `renderSpecialKeys()`

在画布左下角显示当前按下的特殊按键，并提供相关操作提示。

## 坐标转换

### `transformWorld2View(location: Vector): Vector`
### `transformWorld2View(rectangle: Rectangle): Rectangle`

将世界坐标系中的位置或矩形转换为屏幕视图坐标系中的位置或矩形，用于渲染。

### `transformView2World(location: Vector): Vector`
### `transformView2World(rectangle: Rectangle): Rectangle`

将屏幕视图坐标系中的位置或矩形转换为世界坐标系中的位置或矩形，主要用于处理鼠标点击等交互事件。

### `getCoverWorldRectangle(): Rectangle`

获取当前摄像机视野在世界坐标系中覆盖的矩形范围。
